<template>
	<view class="">
		<view class="headerBox">
			<view class="z flex_r_start">
				<veiw class="authorImg">
					<image :src="dataList.avater||'../../static/微信图片_20201124091755.png'" mode=""></image>
				</veiw>
				<veiw>
					<view class="nickName">{{dataList.nickname}}</view>
					<view class="info">浙江·杭州</view>
					<view class="info">{{dataList.introduction}}</view>
				</veiw>
			</view>
			<view class="x flex_r_between">
				<view class="TA">TA的文章</view>
				<view class="flex_r_end">
					<view class="Gz">{{dataList.attention_count}}人关注</view>
					<view class="GzT" @click="guanzhu">{{dataList.is_attention=='0'?'关注TA':'已关注'}}</view>
				</view>
			</view>
		</view>
		<scroll-view style="background-color: #F3F4F5;position: absolute;bottom: 0;top: 310rpx;" scroll-y="true" >
			<view class="listOrt">
				<view class="option" v-for="(item,index) in dataList.articles" :key="index">
					<view class="option-title">
						<view class="title-left">
							<view class="option-awater">
								<image :src="dataList.avater||'../../static/微信图片_20201124091755.png'" mode=""></image>
							</view>
							<view>{{dataList.nickname}}</view>
						</view>
						<view class="title-right" @click="collection(index)">
							<image src="../../static/threedoit.png" mode="widthFix"></image>
						</view>
						<view class="isCollection" v-if="isCollection===index" @click="shoucang(item.article_id,index)">
							取消收藏
						</view>
					</view>

					<view class="option-img" @click="$linkTo(`../home/home/article_detail?article_id=${item.article_id}`)">
						<image :src="item.cover||'../../static/微信图片_20201124091755.png'" mode=""></image>
					</view>
					<view class="option-detail">
						<view class="detail-title">{{item.title}}</view>
						<view class="detail-data">
							<view class="look">
								<view class="look-icons">
									<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>{{item.browse}}
								</view>
								<view class="look-icons">
									<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>{{item.likes}}
								</view>
							</view>
							<view class="hours">{{$timeago(item.date_add*1000)}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				isCollection: NaN,
				loadingText: '加载中...',
				loadingType: 0, //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				triggered: false,
				dataList:[],
			};
		},
		onLoad(option) {
			this.pid=option.pid
			this.$request('/app/community/getAttenInfo','post',{
				pid:option.pid,
				access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
			}).then(res=>{
				this.dataList=res.content
			})
		},
		methods: {
			guanzhu(){
				this.$request('/app/community/attention','post',{
					pid:this.pid,
					access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
				}).then(res=>{
					if(res.content===1){
						this.dataList.is_attention=1
					}else if(res.content===0){
						this.dataList.is_attention=0
					}
				})
			},
			collection(index) {
				if(this.isCollection==NaN || this.isCollection!=index){
					this.isCollection=index
				}else{
					this.isCollection=NaN
				}
			},
			shoucang(article_id,index){
				this.$request('/app/article/collection','post',{
					article_id:article_id,
					access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
				}).then(res=>{
					
				})
			},
			onReachBottom() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");

	.box {
		box-sizing: border-box;
	}

	.listOrt {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.option {
		background: #FFFFFF;
		width: 100%;
		padding-bottom: 10rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;

		.option-title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.title-left {
				color: #777777;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.option-awater {
					width: 48rpx;
					height: 48rpx;
					border-radius: 99px;
					background-color: #007AFF;
					margin-right: 16rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}

			.title-right {
				width: 24rpx;
				height: 24rpx;

				image {
					width: 100%;
				}
			}

			.isCollection {
				position: absolute;
				top: 80rpx;
				right: 20rpx;
				height: auto;
				width: auto;
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 6rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 80rpx;
			}
		}

		.option-img {
			width: 100%;
			height: 420rpx;
			background-color: #007AFF;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.option-detail {
			padding: 20rpx;

			.detail-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 28rpx;
			}

			.detail-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;
				font-size: 20rpx;

				.look {
					display: flex;
					align-items: center;

					.look-icons {
						display: flex;
						align-items: center;
						margin-right: 20rpx;

						.look-icon {
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}

	.headerBox {
		.z {
			padding: 20rpx 40rpx;
			box-sizing: border-box;

			.authorImg {
				width: 90px;
				height: 90px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nickName {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;

			}

			.info {
				width: 370rpx;
				height: 34rpx;
				margin-top: 6rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.x {
			height: 80rpx;
			padding: 0 18rpx 0 40rpx;
			box-sizing: border-box;
			border-top: 1px solid #D1D1D3;

			.TA {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;

			}

			.Gz {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;

			}

			.GzT {
				width: 118rpx;
				height: 48rpx;
				margin-left: 24rpx;
				background: #FFF8F8;
				border-radius: 24rpx;
				border: 1px solid #DB1B22;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #DB1B22;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}
</style>
